
Ext.define('PersonalInfo', {
    extend: 'Ext.data.Model',
    //fields: ['id', 'name', 'address', 'state']
    fields: ['id', 'name', 'username', 'email']
});
Ext.require([
    'Ext.direct.*',
    'Ext.data.*',
    'Ext.grid.*'
]);
Ext.onReady(function() {
    Ext.require([
        'Ext.direct.*',
        'Ext.data.*',
        'Ext.grid.*'
    ]);
    //add a provider to our grid
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
    // create the Grid
    Ext.create('Ext.grid.Panel', {
        store: {
            model: 'PersonalInfo',
            autoLoad: true,
            proxy: {
                type: 'direct',
            }
        },
        proxy: {
            type: 'direct',
            directFn: QueryDatabase.getResults,
            api: {
                create: QueryDatabase.createRecord,
                read: QueryDatabase.getResults,
                update: QueryDatabase.updateRecords,
                destroy: QueryDatabase.destroyRecord
            }
        },    
        columns: [{
            dataIndex: 'id',
            width: 50,
            text: 'ID',
            align: 'center'
        },{
            dataIndex: 'name',
            width: 100,
            text: '姓名',
            align: 'center',
            color: '#99bce8'
        },
        {
            dataIndex: 'username',
            width: 100,
            text: '用户名',
            align: 'center'
        },
        {
            dataIndex: 'email',
            width: 150,
            text: '邮箱',
            align: 'center'
        }],
        height: 450,
        width: 700,
        title: 'Velociraptor Owners',
        renderTo: Ext.getBody()
    },
    );
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });
});
